import React, { useEffect, useState } from 'react';
import styles from './Music.module.css'
import axios from 'axios'
import {NavLink} from 'react-router-dom'
const Item = () => {
    const [music,setMusic] =useState([])
    const [mcc,setMcc] =useState([])
    const [maa,setMaa] =useState([])
    const fecthData =async ()=>{
        var res =await axios.get("http://122.112.161.135:3000/top/playlist")
        console.log(res.data.playlists);
        setMusic(res.data.playlists.slice(0,3))
    }
    const fecthDate=async ()=>{
        var res =await axios.get("http://122.112.161.135:3000/album/newest")
        
        setMcc(res.data.albums.slice(0,3))
    }
    const fecthDatw=async ()=>{
        var res =await axios.get("http://122.112.161.135:3000/personalized/djprogram")
        setMaa(res.data.result.slice(0,3))
    }

    useEffect(()=>{
        fecthData();
        fecthDate();
        fecthDatw();
    },[])
    return (
        <div>
            <p>热门歌曲</p>
            <NavLink to="/musgd?keya=top/playlist">
            <p className={styles.content}>更多</p>
            </NavLink>
            
            <div className={styles.defs}>
            {music.map(item=>{
                return (<div key={item.id}>
                    <div className={styles.unert}>
                    <img className={styles.picee} src={item.coverImgUrl} alt="" />
                    <p>{item.name}</p>
                    </div>
                </div>)
            })}
            </div>

            <p>最新音乐</p>
            <NavLink to="/musgd?keya=album/newest">
            <p className={styles.content}>更多</p>
            </NavLink>
            <div className={styles.defs}>
            {mcc.map(item=>{
                return (<div key={item.id}>
                    <div className={styles.unert}>
                    <img className={styles.picee} src={item.picUrl} alt="" />
                    <p>{item.name}</p>
                    </div>
                </div>)
            })}
            </div>

            <p>主播电台</p>
            <NavLink to="/musgd?keya=personalized/djprogram">
            <p className={styles.content}>更多</p>
            </NavLink>
            <div className={styles.defs}>
            {maa.map(item=>{
                return (<div key={item.id}>
                    <div className={styles.unert}>
                    <img className={styles.picee} src={item.picUrl} alt="" />
                    <p>{item.name}</p>
                    </div>
                </div>)
            })}
            </div>

        </div>
    );
}

export default Item;
